<script lang="ts" setup>
import { langs } from '@/locale'
import {useLocaleStore} from '@/store/locale'

const useLocale = useLocaleStore()
const handleCommand = (command: string | number | object) => {
    useLocale.setLocale(command)
}
</script>

<template>
    <div h-full>
        <el-dropdown h-full w-full @command="handleCommand">
            <ElButton flex flex-items-center flex-justify-center w-full style="outline: unset;height: 100%;border: none;">
                <i i-ion:language />
            </ElButton>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="lang in langs" :command="lang.key">{{ lang.title }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<style scoped lang="scss">
</style>